<template>
    <div style="height: 100%;">
        <breadcrumb :title="'用户咨询'" :noBack="true"></breadcrumb>
        <div class="white-block box" v-loading="loading">
            <div class="toolbar">
                <el-input v-model="key" placeholder="输入用户姓名" class="input mr10"></el-input>
                <el-input v-model="mobile" placeholder="输入联系方式" class="input mr10"></el-input>
                <el-select v-model="state" placeholder="请选择" class="mr10">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="primary no-radius" @click="getList">搜索</el-button>
            </div>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <template slot="userName" slot-scope="scope">
                    <span>{{scope.row.userName}}</span>
                    <div>
                        <el-button class="primary limit text" size="small">{{scope.row.deptName}}</el-button>
                    </div>
                </template>
                <template slot="createTime" slot-scope="scope">
                    <span>{{scope.row.createTime}}</span>
                </template>
                <template slot="operation" slot-scope="scope">
                    <el-link type="primary" :underline="false" v-if="scope.row.state!=2" class="mr10"
                             @click="done(scope.row)">已沟通
                    </el-link>
                    <el-link type="primary" :underline="false" class="mr10"
                             @click="$router.push($route.path+'/'+scope.row.id)">详情
                    </el-link>
                    <el-link type="primary" :underline="false" @click="openDialog(scope.row.id)">备注</el-link>
                </template>
                <template slot="state" slot-scope="scope">
                    <span v-if="scope.row.state==2">已反馈</span>
                    <span v-else class="error">待反馈</span>
                </template>
                <template slot="content" slot-scope="scope">
                    <div class="two-single-line" :title="scope.row.content">
                        {{scope.row.content}}
                    </div>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page" @jumpPage="getList"></page>
        </div>
        <dialog-msk :show.sync="show" ref="dialog" @cancel="close" :title="title" :noModal="false">
            <div slot="footer" class="text-center">
                <span slot="footer">
                    <el-button type="primary" @click="save">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </span>
            </div>
            <div>
                <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1rem">
                    <el-form-item label="备注内容" prop="remark">
                        <el-input v-model="ruleForm.remark" type="textarea"
                                  :autosize="{ minRows: 4, maxRows: 4}"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="fileList">
                        <upload :fileList.sync="ruleForm.fileList"></upload>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import dialogMsk from '../../components/dialog'
    import upload from '../../components/upload'

    export default {

        data() {
            return {
                options: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 1,
                        label: '待反馈'
                    },

                    {
                        value: 2,
                        label: '已反馈'
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'resName',
                        label: '工具名称',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'userName',
                        label: '用户',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '联系方式',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '提交日期',
                        minWidth: '15%',
                        align: 'center'
                    },
                    {
                        prop: 'state',
                        label: '当前状态',
                        width: '100',
                        align: 'center'
                    },
                    {
                        prop: 'content',
                        label: '咨询内容',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '15%',
                        align: 'center'
                    }
                ],
                slotColumns: ['operation', 'userName', 'state', 'createTime', 'content'],
                data: {},
                key: '',
                mobile: '',
                state: '',
                loading: false,
                index: 1,
                show: false,
                title: '备注',
                ruleForm: {
                    remark: '',
                    fileList: [],
                    id: null
                },
                rules: {
                    remark: [
                        {required: true, message: '请输入备注', trigger: 'blur'},
                        {max: 200, message: '备注不能超过200字', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/admin/workbench/pageIntention', {
                    current: this.index || 1,
                    size: 10,
                    userName: this.key,
                    state: this.state,
                    contact: this.mobile
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                    this.$method.updateView()
                }).catch(() => {
                    this.loading = false
                })
            },
            done(row) {
                this.loading = true
                this.$http.post('/admin/workbench/doneIntention', {
                    id: row.id
                }).then(result => {
                    if (result.success) {
                        row.state = 2
                    }
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            close() {
                this.$refs.ruleForm.resetFields()
                this.ruleForm = {
                    remark: '',
                    fileList: [],
                    id: null
                }
                this.show = false
            },
            save() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.loading = true
                        let fileList = []
                        if (this.ruleForm.fileList[0]) {
                            this.ruleForm.fileList.forEach((list) => {
                                fileList.push(list)
                            })
                        }
                        this.$http.post('/admin/workbench/remarkIntention', {
                            content: this.ruleForm.remark,
                            fileObjList: fileList,
                            intentionId: this.ruleForm.id
                        }).then(result => {
                            if (result.success) {
                                this.close()
                            }
                            this.loading = false
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        return false
                    }
                })
            },
            openDialog(id) {
                this.show = true
                this.$nextTick(() => {
                    this.ruleForm.id = id
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page,
            dialogMsk,
            upload
        }
    }
</script>

<style scoped lang="less">
    .box {
        .input {
            width: 2.8rem;
            height: 0.5rem;
            line-height: 0.5rem;
        }
        .button {
            border: none;
            background-color: #fff;
            color: #1497fc;
        }
        .page {
            margin-top: 1.1rem;
        }
    }
</style>
